<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DoitCSS V2.3 文字排版 + 超级链接 -实例</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="DoitCSS V1.0">
	<meta name="description" content="DoitCSS是根据bootstap改编的CSS框架">
	<!--基础-->
	<link href="../css/base.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--文字排版-->
	<link href="../css/typography.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表格-->
	<link href="../css/tables.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表单按钮-->
	<link href="../css/form-buttons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--架构-->
	<link href="../css/layouts.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--元件-->
	<link href="../css/elements.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--图标-->
	<link href="../css/icons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--菜单-->
	<link href="../css/navigation.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--分页-->
	<link href="../css/pagination.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--清除浮动-->
	<link href="../css/clear.css?ver=v2.3" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
<fieldset class="mt30">
<legend>文字标题：</legend>
<h1>H1:天地人和 <small>风生水起</small></h1>
<h2 class="color-success">H2:天地人和 <small>风生水起</small></h2>
<h3 class="color-danger">H3:天地人和 <small>风生水起</small></h3>
<h4 class="color-warning">H4:天地人和 <small>风生水起</small></h4>
<h5 class="color-info">H5:天地人和 <small>风生水起</small></h5>
<h6 class="color-purple">H6:天地人和 <small>风生水起</small></h6>
</fieldset>

<fieldset class="mt20">
<legend>文字内容：</legend>
<p><span class="content-title danger">这是标题</span></p>
	<p class="text-indent">如果，<strong>红颜有梦</strong>，那么君子可解；<small>如果 君子 有语</small>，那么红颜可听；所有繁华落尽，想必到头来都成烟雨，<span class="color-green">随花谢</span>，<span class="color-red">随月弯</span>。我寂寞如烟，你，独坐如莲，晚风透过窗棂悄悄渗入，留一阵冰清澈骨的痛，裹一身素素淡淡的忧，何时你才能读懂那一双多情的眼眸。</p>
	<p>清风相伴随爱行，<span class="color-red">落花相伴随你舞</span>。你用爱的灵魂，点燃沉寂经年的火焰，温暖了我一生的记忆。你的怀抱注定，是我今生飞翔的终点。爱人，蓦然回首，我还是那个在暮色中，深深为你俯首的女孩，我还是那个在长发飘起的时候，用如水的眸光，为你作万般叮咛的女子……</p>
	<p class="lead">lead: 随风飘散，你的模样。(用于副标题)</p>
	<p class="text-indent">风来雨落，<span class="color-blue">秋来叶归</span>。生活就是一场又一场花开花落；人生就是一场又一场无悔穿越。<span class="strong">静静</span>的走，默默的看，<mark>无论风雨</mark>，无论坎坷，慢慢品味人生的青涩与成熟。</p>
	<blockquote>
		宁静是一幅水墨画，淡雅而隽永；<code>宁静是一首山水诗</code>，空灵而<span class="fn-color-black"><strong>清新</strong></span>。山涧的一泓清泉，午后的一缕<small>轻风</small>，<ins>Ins: 夏日的一片绿荫</ins>，冬天的一束阳光，一切都昭示着宁静。
	</blockquote>
	<p>代码实例：<code>Hello World!</code></p>
	<p>Pre实例：
<pre>
hello world;
if(username=='tommy'){
  echo 'so good';
}
</pre>完美的分隔线：<br>
	<hr>
	<output>标签：output 这就是输出吗？</output>
	</p>
	<p><div class="list-title danger">列表的标题</div></p>
	<p>文字的位置，<span class="text-delete">居中，居左，居右</span></p>
	<div class="text-left color-red">天地人和</div>
	<div class="text-center color-blue">天地人和</div>
	<div class="text-right color-green">天地人和</div>
	<div>机智 <sup>5</sup> 如我 <sub>tm</sub></div>
</fieldset>

<fieldset class="mt20">
<legend>文字大小：</legend>
<p>12号：<span class="font12">思念很美，若是缘浅，我们此后不再牵扯彼此情长。</span></p>
<p>14号：<span class="font14">思念很美，若是缘浅，我们此后不再牵扯彼此情长。</span></p>
<p>16号：<span class="font16">思念很美，若是缘浅，我们此后不再牵扯彼此情长。</span></p>
<p>18号：<span class="font18">思念很美，若是缘浅，我们此后不再牵扯彼此情长。</span></p>
</fieldset>

<fieldset class="mt20">
<legend>文字颜色：</legend>
<p><span class="color-red2">红色</span>系：<span class="color-red">思念很美</span>，若是<span class="color-lightred">缘浅</span>，<span class="color-darkred">我们此后不再牵扯彼此情长。</span></p>
<p>绿色系：<span class="color-green">思念很美</span>，若是<span class="color-lightgreen">缘浅</span>，<span class="color-darkgreen">我们此后不再牵扯彼此情长。</span></p>
<p>蓝色系：<span class="color-blue">思念很美</span>，若是<span class="color-lightblue">缘浅</span>，<span class="color-darkblue">我们此后不再牵扯彼此情长。</span></p>
<p>橙色系：<span class="color-orange">思念很美</span>，若是<span class="color-lightorange">缘浅</span>，<span class="color-darkorange">我们此后不再牵扯彼此情长。</span></p>
<p>紫色系：<span class="color-purple">思念很美</span>，若是<span class="color-lightpurple">缘浅</span>，<span class="color-darkpurple">我们此后不再牵扯彼此情长。</span></p>
<p>灰色系：<span class="color-grey">思念很美</span>，<span class="color-darkgrey">若是<span class="color-lightgrey">缘浅</span>，我们此后不再牵扯彼此情长。</span></p>

<p>黑色：<span class="color-black">思念很美，若是缘浅，我们此后不再牵扯彼此情长。</span></p>
<p class="bg-color-green">白色：<span class="color-white">思念很美，若是缘浅，我们此后不再牵扯彼此情长。</span></p>
</fieldset>

<fieldset class="mt20">
<legend>超级链接：</legend>
<p>默认：<a href="#">你若安好，便是晴天</a>。</p>
<p>黑色：<a href="#" class="link-black">你若安好，便是晴天</a>。</p>
<hr>
<p>红色：<a href="#" class="link-red">你若安好，便是晴天</a>。</p>
<p>深红色：<a href="#" class="link-darkred">你若安好，便是晴天</a>。</p>
<p>浅红色：<a href="#" class="link-lightred">你若安好，便是晴天</a>。</p>
<hr>
<p>绿色：<a href="#" class="link-green">你若安好，便是晴天</a>。</p>
<p>深绿色：<a href="#" class="link-darkgreen">你若安好，便是晴天</a>。</p>
<p>浅绿色：<a href="#" class="link-lightgreen">你若安好，便是晴天</a>。</p>
<hr>
<p>蓝色：<a href="#" class="link-blue">你若安好，便是晴天</a>。</p>
<p>深蓝色：<a href="#" class="link-darkblue">你若安好，便是晴天</a>。</p>
<p>浅蓝色：<a href="#" class="link-lightblue">你若安好，便是晴天</a>。</p>
<hr>
<p>紫色：<a href="#" class="link-purple">你若安好，便是晴天</a>。</p>
<p>深紫色：<a href="#" class="link-darkpurple">你若安好，便是晴天</a>。</p>
<p>橙色：<a href="#" class="link-orange">你若安好，便是晴天</a>。</p>
</fieldset>

<fieldset class="mt20">
<legend>图片：</legend>
圆角：<br>
<img src="http://www.doitphp.com/assets/images/doitphp_banner_01.jpg" class="img-rounded" width="400"><br>
缩略图：<br>
<img src="http://www.doitphp.com/assets/images/doitphp_banner_01.jpg" class="img-thumbnail" width="400"><br>
圆形：<br>
<img src="http://www.doitphp.com/assets/images/doitphp_banner_01.jpg" class="img-circle" width="400">
</fieldset>
</div>
</body>
</html>